import { Text, StyleSheet, View, Image, TouchableOpacity } from "react-native";
import React, { useState } from "react";
import PageContainer from "@/components/PageContainer";
import { useRouter } from "expo-router";
import useUser from "@/hooks/useUser";
import { Icon } from "@ant-design/react-native";
import { useTranslation } from "react-i18next";

export default function Invite() {
  const router = useRouter();
  const { user } = useUser();
  const { t } = useTranslation();

  return (
    <PageContainer>
      <View className="bg-[#000] flex-1 p-[13px]">
        <View className="items-center flex-row h-[46px]">
          <TouchableOpacity onPress={() => router.back()}>
            <Image
              source={require("@/assets/images/return-left.png")}
              className="w-[18px] h-[18px]"
            />
          </TouchableOpacity>
          <View className="flex-1 flex-row justify-center">
            <Text className="text-[#fff] text-[18px]">
              {t("profile.security_settings")}
            </Text>
          </View>
          <View className="w-[18x] h-[18px]"></View>
        </View>
        <TouchableOpacity onPress={() => router.push("/(auth)/forgotpsw")}>
          <View
            style={{
              borderBottomWidth: 1,
              borderBottomColor: "#303030",
            }}
            className="py-[16px]"
          >
            <View className="flex-row justify-between gap-[10px] items-center">
              <Text className="text-[#fff] text-[16px] flex-1">
                {t("forgotPassword.submit_button")}
              </Text>
              <Image
                source={require("@/assets/images/arrow-right.png")}
                className="w-[18px] h-[18px]"
              ></Image>
            </View>
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => router.push("/(auth)/payPaw")}>
          <View
            style={{
              borderBottomWidth: 1,
              borderBottomColor: "#303030",
            }}
            className="py-[16px]"
          >
            <View className="flex-row justify-between gap-[10px] items-center">
              <Text className="text-[#fff] text-[16px] flex-1">
                {t("forgotPassword.payment-password")}
              </Text>
              <Image
                source={require("@/assets/images/arrow-right.png")}
                className="w-[18px] h-[18px]"
              ></Image>
            </View>
          </View>
        </TouchableOpacity>
        {/* <View
          style={{
            borderBottomWidth: 0,
            borderBottomColor: "#303030",
          }}
          className="py-[16px]"
        >
          <View className="flex-row justify-between gap-[10px] items-center">
            <Text className="text-[#fff] text-[16px] flex-1">设备管理</Text>
            <Image
              source={require("@/assets/images/arrow-right.png")}
              className="w-[18px] h-[18px]"
            ></Image>
          </View>
        </View> */}
      </View>
    </PageContainer>
  );
}

const styles = StyleSheet.create({});
